<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>爱打印-iprint 后台首页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css }" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote layui-bg-green">
		<div id="nowTime"></div>
		<div>上次登陆时间:[[${session.admin.lastLoginTime }]]</div>
		<div>上次登陆ip:[[${session.admin.lastLoginIp }]]</div>
	</blockquote>
	<div class="layui-row ">
		<div id="salesData" style="width: 100%;height:400px;"></div>
	</div>
	<div class="layui-row">
		<div class="layui-col-lg6 layui-col-md6">
			<div id="salesCount" style="width: 100%;height:400px;"></div>
		</div>
		<div class="layui-col-lg6 layui-col-md6">
			<div id="salesPrice" style="width: 100%;height:400px;"></div>
		</div>
	</div>

	<script type="text/javascript" th:src="@{/layui/layui.js }"></script>
	<script type="text/javascript" th:src="@{/js/main.js}"></script>
	<script type="text/javascript" th:src="@{/js/echarts.common.min.js}"></script>
	<script type="text/javascript">
		layui.use(['jquery'], function(){ 
		  var $ = layui.$;
		  $(function(){
			  var salesData = echarts.init(document.getElementById('salesData'));
			  var salesCount = echarts.init(document.getElementById('salesCount'));
			  var salesPrice = echarts.init(document.getElementById('salesPrice'));
			  salesData.showLoading({text: 'Loding...'}); 
	       		$.ajax({  
	       	        url:'/iprint/admin/getSalesData',  
	       	        dataType:"json",  
	       	        type:'get', 
	       	     	success:function(json){
	       	     		//七天内每天交易总额
		       	     	day = json.map.date;    
		                total = json.map.total;
		                //七天内各个完成的订单类型以及数量
		                count = json.map.option2;
		                //七天内个商品的销售额
		                myPrice = json.map.option3;
		                var option1 = {
		                	    title: {
		                	        text: '爱打印平台日销售金额',
		                	        subtext: '实时刷新'
		                	    },
		                	    tooltip: {
		                	        trigger: 'axis',
		                	        axisPointer: {
		                	            type: 'cross'
		                	        }
		                	    },
		                	    toolbox: {
		                	        show: true,
		                	        feature: {
		                	            saveAsImage: {}
		                	        }
		                	    },
		                	    xAxis:  {
		                	        type: 'category',
		                	        boundaryGap: false,
		                	        data: day
		                	    },
		                	    yAxis: {
		                	        type: 'value',
		                	        axisLabel: {
		                	            formatter: '{value} 元'
		                	        },
		                	        axisPointer: {
		                	            snap: true
		                	        }
		                	    },
		                	   
		                	    series: [
		                	        {
		                	            name:'当日总额',
		                	            type:'line',
		                	            smooth: true,
		                	            data: total,
		                	            
		                	        }
		                	    ]
		                	};
		                var option2 = {
		                	    title : {
		                	        text: '七天内各订单数量占比',
		                	        subtext: '实时统计',
		                	        x:'center'
		                	    },
		                	    tooltip : {
		                	        trigger: 'item',
		                	        formatter: "{a} <br/>{b} : {c} ({d}%)"
		                	    },
		                	    series : [
		                	        {
		                	            name: '订单数量',
		                	            type: 'pie',
		                	            radius : '55%',
		                	            center: ['50%', '60%'],
		                	            data:count,
		                	            itemStyle: {
		                	                emphasis: {
		                	                    shadowBlur: 10,
		                	                    shadowOffsetX: 0,
		                	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                	                }
		                	            }
		                	        }
		                	    ]
		                	};
		               var option3 = {
		            		   title: {
		                	        text: '七天内各类型商品销售金额',
		                	        subtext: '实时刷新',
		                	        x:'center'
		                	    },
		                	    tooltip: {
		                	        trigger: 'item',
		                	        formatter: "{a} <br/>{b}: {c} ({d}%)"
		                	    },
		                	    series: [
		                	        {
		                	            name:'销售占比',
		                	            type:'pie',
		                	            radius: ['50%', '70%'],
		                	            avoidLabelOverlap: false,
		                	            label: {
		                	                normal: {
		                	                    show: false,
		                	                    position: 'center'
		                	                },
		                	                emphasis: {
		                	                    show: true,
		                	                    textStyle: {
		                	                        fontSize: '30',
		                	                        fontWeight: 'bold'
		                	                    }
		                	                }
		                	            },
		                	            labelLine: {
		                	                normal: {
		                	                    show: false
		                	                }
		                	            },
		                	            data:myPrice
		                	        }
		                	    ]
		                	};
		                salesData.hideLoading();  
		                salesData.setOption(option1);
		                salesCount.setOption(option2);
		                salesPrice.setOption(option3);
	       	     	}
	       		}); 
		  })
		});
		
    </script>
</body>
</html>